import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install(app:App) {
    app.directive('Lazy', {
      mounted(el,binding) {
        const { stop } = useIntersectionObserver(el,([{isIntersecting}])=> {
          if(isIntersecting) {
            el.src = binding.value
            // 停止监视
            stop()
          }
          // onerror 图片请求失败 给默认图
          el.onerror = () => {
            el.src = defaultImg
          }
        })
      }
    }) 
  }
}